<template>
  <div>
    <Header :title="store.params.title" />
    <FoodList :spanList="list" />
  </div>
</template>
<script setup>
import { ref, watch } from "vue";
import { useRoute } from "vue-router";
let route = useRoute();
import Header from "../../components/Nbnc/Header.vue";
import FoodList from "../../components/Nbnc/FoodList.vue";
import { useCount } from "../../store/index";
let store = useCount();
let list = ref([]);
let CatSpanList = ref(["奶猫", "幼年猫", "成年猫"]);
let DogSpanList = ref(["奶狗", "幼年狗", "成年狗"]);
watch(
  () => [store.params.Nbnc_id, route.query.food_category_id],
  () => {
    if (store.params.Nbnc_id == 1) {
      list.value = DogSpanList.value;
    } else {
      list.value = CatSpanList.value;
    }
    if (route.query.food_category_id) {
      store.changeParams({ stage: "", stage_value: "" });
    }
  },
  {
    immediate: true,
  }
);
</script>
<style scoped>
</style>